<template>
<div>
    <div class="info">
        <div class="info hd">基本信息</div>
        <div class="bd">
           <el-form :model="baseForm" ref="baseForm" label-width="100px" class="baseForm">
            <el-form-item label="景点名称" prop="spotName">
              <el-input v-model="baseForm.spotName" disabled></el-input>
            </el-form-item>
            <el-form-item label="景点城市" prop="cityId">
                <el-input v-model="city.cityName" disabled></el-input>
            </el-form-item>
             <el-form-item label="景点地址" prop="address">
              <el-input v-model="baseForm.address" disabled></el-input>
            </el-form-item>
            <el-form-item label="开放时间">
                <el-col :span="4">
                    <el-form-item prop="openStartTime">
                        <el-time-picker placeholder="开始时间" disabled value-format="HH:mm:ss" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col style="text-align: center" :span="1">-</el-col>
                <el-col :span="4">
                    <el-form-item prop="openEndTime">
                        <el-time-picker placeholder="结束时间" disabled value-format="HH:mm:ss" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="景区主题" prop="themes">
              <div v-if="themes&&themes.length>0">
                <el-col :span="3" v-for="(item,i) in themes" :key="i" style="margin-bottom:10px">
                  <el-button type="primary" disabled>{{item.themeName}}</el-button>
                </el-col>
              </div>
              <div class="grey" v-else><el-button type="default" disabled>暂无～</el-button></div>
            </el-form-item>
            <el-row>
              <el-col :span="6">
                <el-form-item label="经度" prop="longitude">
                  <el-input v-model="baseForm.longitude" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="纬度:" prop="latitude">
                <el-input v-model="baseForm.latitude" disabled></el-input>
               </el-form-item>
              </el-col>
              <el-col :span="6">
              </el-col>
            </el-row>
            <el-form-item label-width="46px">
              <div id="container" class="container-map" v-if="showMap">
                <el-amap vid="amap" :zoom="zoom" :center="center">
                <el-amap-marker :position="center"></el-amap-marker>
              </el-amap>
              </div>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="baseForm.status" disabled>
                <el-radio  :label="1">上架</el-radio>
                <el-radio  :label="0">下架</el-radio>
              </el-radio-group>
            </el-form-item>

          </el-form>
        </div>
    </div>
    <div class="info">
      <div class="info hd">附加信息</div>
      <div class="bd">
          <!--附加信息-->
          <div class="table-info" v-if="baseForm.addInfoList&&baseForm.addInfoList.length>0">
            <el-table size="mini" border :data="baseForm.addInfoList" style="width: 100%"  :header-cell-style="{background: '#DBEDF6'}">
              <el-table-column prop="addInfoName" label="附加信息名称"></el-table-column>
              <el-table-column prop="addDescribe" label="附加信息描述"></el-table-column>
            </el-table>
          </div>
      </div>
    </div>
    <div class="info">
      <div class="info hd">景区图片</div>
      <div class="bd">
      <el-form>
          <!--景区封面图-->
          <el-form-item label="封面预览" prop="" v-if="baseForm.imageUrl">
            <div class="preview" style="margin-left:72px;margin-top:-20px" v-if="baseForm.imageUrl!=''">
                    <div class="item">
                        <img :src="baseForm.imageUrl">
                    </div>
              </div>
          </el-form-item>
          <el-form-item label="景区图集" prop="">
            <div class="preview" style="margin-top:-20px" v-if="baseForm.images&&baseForm.images.length>0">
                <div class="item" v-for="item in baseForm.images" :key="item">
                    <img :src="item">
                </div>
            </div>
            </el-form-item>
      </el-form>
      </div>
    </div>
     <div class="info">
      <div class="info hd">景区介绍</div>
      <div class="bd">
          <div v-if="baseForm.introduction" v-html="baseForm.introduction" class="editor"></div>
          <div v-else class="grey">暂无数据~</div>
      </div>
    </div>
</div>
</template>

<script>
import TinymceEditor from '@/components/editor/editor'
import { setTimeout } from 'timers'
import Cookies from 'js-cookie'
export default {
  data () {
    return {
      spotId: '',
      center: [], // 中心点坐标
      zoom: 13,
      themes: '',
      baseForm: {
        latitude: '',
        longitude: '',
        themes: [],
        status: 1,
        introduction: '',
        imageUrl: '', // 封面图
        images: [] // 图集 todo
      },
      city: { cityName: '' },
      description: '',
      citys: '',
      date: '',
      showAddForm: false,
      addInfoForm: {},
      addInfoList: [],
      activeIdx: '',
      showMap: false,
      BMap: null
    }
  },
  created () {
    this.spotId = this.$route.params.id
    this.getData()
  },
  methods: {
    getLocation () {
      this.$http
        .get('/spot/getSpotInfo', {
          params: {
            spotId: this.spotId
          }
        })
        .then(res => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.center = {
            lat: res.data.data.latitude,
            lng: res.data.data.longitude
          }
        })
    },
    getData () {
      Promise.all([
        this.$http.get('/form/getScenicThemes'),
        this.$http.get('/form/getScenicCities'),
        this.$http.get('/spot/getSpotInfo', {
          params: {
            spotId: this.spotId
          }
        })
      ]).then(values => {
        const themes = values[0].data.data
        const cities = values[1].data.data
        this.baseForm = values[2].data.data
        const dataThemes = []
        if (this.baseForm.themes && this.baseForm.themes.length > 0) {
          this.baseForm.themes.map(value => {
            if (value) {
              dataThemes.push(parseInt(value))
            }
          })
        }
        if (dataThemes && dataThemes.length > 0) {
          const themesData = themes.filter(value => {
            return dataThemes.indexOf(value.themeId) > -1
          })
          this.themes = themesData
        } else {
          this.themes = []
        }
        if (this.baseForm.cityId) {
          let cityData = cities.filter(value => {
            return value.cityId == this.baseForm.cityId
          })
          cityData = cityData[0]
          this.city = cityData
        } else {
          this.city = { cityName: '' }
        }
        this.center = [this.baseForm.longitude, this.baseForm.latitude]
        this.showMap = true
      })
    },
    // 选择景区主题
    selectTheme (item) {
      if (!this.baseForm.themes) {
        this.baseForm.themes = []
      }
      const index = this.baseForm.themes.indexOf(item.themeId)
      if (index !== -1) {
        this.baseForm.themes.splice(index, 1)
      } else {
        this.baseForm.themes.push(item.themeId)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container-map {
  width: calc(100% - 0px);
  height: 300px;
  .baidu-map-view {
    height: 300px;
  }
}
.form-info {
  width: calc(100% - 100px);
}
.form-info {
  width: calc(100% - 100px);
}
.info {
  margin-top: 10px;

  .hd {
    height: 50px;
    line-height: 50px;
    background: #dbedf6;
    font-weight: bold;
    padding: 0 20px;
    font-size: 16px;
  }

  .bd {
    background: #fff;
    padding: 20px;

    .row {
      display: flex;
      padding: 10px 0;

      .k {
        color: #999;
        width: 150px;
        text-align: right;
        padding-right: 10px;
      }

      .v {
        flex: 1;
        font-weight: 600;

        img {
          width: 145px;
          display: inline-block;
        }
      }
    }

    // .row2 {

    // }
  }
}
.dialog {
  .tips {
    background: #f5f5f5;
    padding: 20px;
  }

  .upload {
    padding: 20px 0;
  }
}
.preview {
  display: flex;
  padding-top: 20px;
  video {
    width: 100%;
  }
  .item {
    position: relative;
    margin-right: 10px;
    margin-bottom: 12px;
    width: 180px;

    i.el-icon-close {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #666666;
      color: #fff;
      line-height: 14px;
      text-align: center;
      right: -7px;
      top: -7px;
    }

    .v {
      text-align: center;
      cursor: pointer;
      height: 120px;
      line-height: 156px;
      background: #f7f7f7;

      i {
        font-size: 64px;
        color: #666;
      }
    }

    img {
      width: 100%;
    }
  }
}
</style>
